<template>
    <view class="blood-detail-container">
        <view class="title">献血地点和服务时间表</view>

        <view class="list">
            <view class="list-item" v-for="item in list" :key="item.id">
                <view class="row list-item-title">{{ item.name }}</view>
                <view class="row list-item-address" @click="openMap(item.address)">
                    <text>{{ item.address }}</text>
                    <image src="../../static/right.png" mode="widthFix" class="right-icon"></image>
                </view>
                <view class="row list-item-time">{{ item.workTime }}</view>
                <view class="row list-item-phone">{{ item.telphone }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>  
import { ref, onMounted } from 'vue'
import { getBloodAddressList } from '@/utils/api'   

const list = ref([])

// 获取献血地点列表
const getBloodAddressListData = async () => {
    try {
        const response = await getBloodAddressList( {
            page: 1,
            limit: 99
        })
        console.log(response)
        if (response.code == 0) {
            list.value = response.data.records || []
        } else {
            console.error('获取献血地点列表失败:', response)
            uni.showToast({
                title: '获取数据失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('请求献血地点列表出错:', error)
        uni.showToast({
            title: '网络请求失败',
            icon: 'none'
        })
    }
}

// 打开地图导航
const openMap = (address) => {
    // #ifdef APP-PLUS
    // APP端使用系统地图
    plus.runtime.openURL(`geo:0,0?q=${encodeURIComponent(address)}`)
    // #endif
    
    // #ifdef H5
    // H5端使用百度地图
    window.open(`https://api.map.baidu.com/geocoder?address=${encodeURIComponent(address)}&output=html`)
    // #endif
    
    // #ifdef MP
    // 小程序端使用微信地图
    uni.openLocation({
        latitude: 0,
        longitude: 0,
        name: address,
        address: address,
        scale: 18
    })
    // #endif
}

// 页面加载时获取数据
onMounted(() => {
    getBloodAddressListData()
})
</script>

<style lang="scss" scoped>
.blood-detail-container{
    padding: 24rpx;

    .title{
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
    }

    .list{
        margin-top: 24rpx;
        .list-item{
            background: #FFFFFF;
            border-radius: 16rpx;
            border: 2rpx solid #E7E8EB;
            padding: 0 24rpx;
            margin-bottom: 24rpx;
            
            .row{
                display: flex;
                align-items: center;
                font-size: 28rpx;
                line-height: 40rpx;
                padding: 24rpx 0;
                border-bottom: 2rpx solid rgba(0,0,0,0.09);

                &:last-child{
                    border-bottom: none;
                }
            }
            
            .list-item-address {
                justify-content: space-between;
                cursor: pointer;
                
                text {
                    flex: 1;
                }
                
                .right-icon {
                    width: 24rpx;
                    height: 24rpx;
                    flex-shrink: 0;
                    margin-left: 16rpx;
                }
            }
        }
    }
}
</style>